<template>
    <div class="view-content">
        <div class="view-list">
            <!-- <div class="view-item" v-for="(item, i) in mainRef.showView" :key="i">
                <div class="xy-view view-container">
                    <div class="view-item__header">
                        {{ item.title }}
                    </div>
                    <div class="view-item__content">
                        <pui-button @click="backView" v-if="item.isBack">返回</pui-button>
                        <img :src="item.img" @click="changeView(item)"/>
                    </div>
                </div>
            </div> -->
            <div class="view-item" v-if="!mainRef.isBack">
                <div class="xy-view view-container">
                    <div class="view-item__header">
                        横向结构视图
                    </div>
                    <div class="view-item__content">
                        <img src="@/assets/horizontal-1.png" @click="changeView"/>
                    </div>
                </div>
            </div>
            <div class="view-item" v-else>
                <div class="xy-view view-container">
                    <div class="view-item__header">
                        有源区视图
                    </div>
                    <div class="view-item__content">
                        <pui-button @click="backView">返回</pui-button>
                        <img src="@/assets/horizontal-2.png" @click="changeView"/>
                    </div>
                </div>
            </div>
            <div class="view-item">
                <div class="xy-view view-container">
                    <div class="view-item__header">
                        纵向结构视图
                    </div>
                    <div class="view-item__content">
                        <img src="@/assets/vertical-1.png"/>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
    name: 'ViewContent'
})
</script>
<script lang="ts" setup>
import { reactive, getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance() as any
const mainRef = reactive({
    viewList: [
        {title: '横向结构视图', type: 'horizontal', img: require('@/assets/horizontal-1.png'), children: [
            {title: '有源区视图', type: 'active', img: require('@/assets/horizontal-2.png'), isBack: true}
        ]},
        {title: '纵向结构视图', type: 'vertical', img: require('@/assets/vertical-1.png')}
    ],
    showView: [
        {title: '横向结构视图', type: 'horizontal', img: require('@/assets/horizontal-1.png'), children: [
            {title: '有源区视图', type: 'active', img: require('@/assets/horizontal-2.png'), isBack: true}
        ]},
        {title: '纵向结构视图', type: 'vertical', img: require('@/assets/vertical-1.png')}
    ],
    figures: {} as any,
    isShow: false,
    currentIndex: '',
    isBack: false
}) as any
const init = () => {
}
const clickOutsideHandle = () => {
    mainRef.isShow = false
    mainRef.currentIndex = ''
}
const toggleOpen = (idx:any) => {   
    mainRef.currentIndex = idx
    mainRef.isShow = !mainRef.isShow
}
const backView = () => {
    // mainRef.showView[0] = mainRef.viewList[0]
    mainRef.isBack = false
}
const changeView = (data: any) => {
    // if (data.children) {
    //     mainRef.showView[0] = data.children
    //     console.log(mainRef.showView[0])
    // }
    mainRef.isBack = true
}
defineExpose({
    init
})
</script>